<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="食谱图片">
        <el-input v-model="form.imageUrl"></el-input>
      </el-form-item>
      <el-form-item label="名字">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="热量">
        <el-input v-model="form.heat"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="form.briefly"></el-input>
      </el-form-item>
      <el-form-item label="做法">
        <el-input v-model="form.practice"></el-input>
      </el-form-item>
      <el-form-item label="食物名字">
        <el-select v-model="form.v" multiple placeholder="请选择">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        imageUrl: "",
        name: "",
        heat: "",
        briefly: "",
        practice: "",
        v: [],
      },
      options:[]
    };
  },
};
</script>

<style>
.container {
  width: 400px;
  margin-top: 40px;
}
</style>